<!--
 * @Description: 报工管理-生产报工记录
 * @Autor: 曹敬涛
 * @Date: 2021-09-10 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-17 08:58:28
-->
<div class="ex-management">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>生产报工记录</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <!-- 查询框 -->
                <div class="ui-g">
                    <span class="ui-float-label  quality-dept ui-g-2">
                        <span class="text">任务编号</span>
                        <input id="input" type="text" name="jobNumber" #jobNumberInput="ngModel" pInputText
                            [(ngModel)]="queryInfo.jobNumber">
                    </span>
                    <span class="ui-float-label quality-dept  ui-g-2">
                        <span class="text">规程编号</span>
                        <input id="input" type="text" name="techniqueNumber" #techniqueNumberInput="ngModel" pInputText
                            [(ngModel)]="queryInfo.techniqueNumber">
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">规程名称</span>
                        <input id="input" name="techniqueName" #techniqueNameInput="ngModel" type="text"
                            name="techniqueNumber" pInputText [(ngModel)]="queryInfo.techniqueName">
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">工序名称</span>
                        <input id="input" name="processesName" #processesNameInput="ngModel" type="text"
                            name="techniqueNumber" pInputText [(ngModel)]="queryInfo.processesName">
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">工步名称</span>
                        <input id="input" name="workStepName" #workStepNameInput="ngModel" type="text"
                            name="techniqueNumber" pInputText [(ngModel)]="queryInfo.workStepName">
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">计划日期</span>
                        <p-calendar [(ngModel)]="queryInfo.time" selectionMode="range" [readonlyInput]="true">
                        </p-calendar>
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">状态</span>
                        <p-dropdown name="productingStatus" #productingStatusSelect="ngModel"
                            [options]="productingStatus" [(ngModel)]="queryInfo.productingStatus" dataKey="value"
                            [optionLabel]="'label'" placeholder="请选择">
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">装配班组</span>
                        <p-multiSelect (onChange)="unitChangeEv($event.value)" [options]="getOrganizationUnitList"
                            name="organizationUnitDesc" #organizationUnitDescSelect="ngModel"
                            [(ngModel)]="queryInfo.organizationUnitDesc" defaultLabel="请选择" optionLabel="displayName"
                            dataKey="id"></p-multiSelect>
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">装配人员</span>
                        <p-multiSelect [options]="getOrganizationUnitUsersByIdList" name="userName"
                            #userNameSelect="ngModel" [(ngModel)]="queryInfo.userName" defaultLabel="请选择"
                            optionLabel="name" dataKey="id">
                        </p-multiSelect>
                    </span>
                    <span class="ui-float-label quality-dept ui-g-2">
                        <span class="text">装配日期</span>
                        <p-calendar [(ngModel)]="queryInfo.assemblyTime" selectionMode="range" [readonlyInput]="true">
                        </p-calendar>
                    </span>
                    <p-button label="查询" (click)="getDescList($event)" class="query-btn"></p-button>
                    <p-button type="button" label="重置" (click)="reset()" class="reset-btn"></p-button>
                </div>
                <!-- 列表 -->
                    <div class="row align-items-center" style="margin-top: 25px;">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                (onLazyLoad)="getDescList($event)" [paginator]="false" [lazy]="true" [scrollable]="true"
                                [(selection)]="selectRow" [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns">
                                <ng-template pTemplate="header" let-car>
                                    <tr>
                                        <th style="width: 120px">操作</th>
                                        <th style="width: 80px">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width: 80px">序号</th>
                                        <th style="width: 110px">任务编号</th>
                                        <th style="width: 110px">型号</th>
                                        <th style="width: 110px">发次</th>
                                        <th style="width: 110px">规程编号</th>
                                        <th style="width: 110px">规程名称</th>
                                        <th style="width: 110px">工序图号</th>
                                        <th style="width: 110px">工序名称</th>
                                        <th style="width: 110px">工步图号</th>
                                        <th style="width: 110px">工步内容</th>
                                        <th style="width: 110px">标准工时</th>
                                        <th style="width: 110px">配套状况</th>
                                        <th style="width: 110px">计划开始日期</th>
                                        <th style="width: 110px">计划完成日期</th>
                                        <th style="width: 110px">状态</th>
                                        <th style="width: 110px">装配班组</th>
                                        <th style="width: 110px">装配人员</th>
                                        <th style="width: 110px">装配开始日期</th>
                                        <th style="width: 110px">装配完成日期</th>
                                        <th style="width: 110px">工时提报</th>
                                        <th style="width: 110px">调度员</th>
                                        <th style="width: 110px">下发时间</th>
                                        <th style="width: 110px">备注</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                                    <tr>
                                        <td style="width: 120px">
                                            <div class="btn-group dropdown" dropdown container="body">
                                                <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                    <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                                </button>
                                                <ul class="dropdown-menu" *dropdownMenu>
                                                    <li>
                                                        <a *ngIf="'Pages.ProductionRecord.Resume' | permission" href="javascript:;" (click)="llVisibleEv(car.id)">履历</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" *ngIf="'Pages.ProductionRecord.Rework' | permission"
                                                            (click)="cancelVisible = true;cancelInfo=car">返工</a>
                                                    </li>
                                                    <li>
                                                        <a *ngIf="'Pages.ProductionRecord.See' | permission" href="javascript:;" (click)="watchTaskByIdEv(car.id)">查看</a>
                                                    </li>
                                                    <li *ngIf="car.productingStatusDesc != '已完成'">
                                                        <a *ngIf="'Pages.ProductionRecord.Production' | permission" href="javascript:;" (click)="getTaskByIdEv(car.id)">生产报工</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td style="width: 80px">
                                            <p-tableCheckbox [value]="car"></p-tableCheckbox>
                                        </td>
                                        <td style="width: 80px">{{rowIndex+1}}</td>
                                        <td style="width: 110px">{{car.jobNumber}}</td>
                                        <td style="width: 110px">{{car.model}}</td>
                                        <td style="width: 110px">{{car.lotNo}}</td>
                                        <td style="width: 110px">{{car.techniqueNumber}}</td>
                                        <td style="width: 110px">{{car.techniqueName}}</td>
                                        <td style="width: 110px">{{car.drawingNo}}</td>
                                        <td style="width: 110px">{{car.productionName}}</td>
                                        <td style="width: 110px">{{car.workStepDrawingNo}}</td>
                                        <td style="width: 110px">{{car.workStepName}}</td>
                                        <td style="width: 110px">{{car.workingHour}}</td>
                                        <td style="width: 110px">{{car.matchingCondition}}</td>
                                        <td style="width: 110px">{{car.startTime |date:'yyyy-MM-dd'}}</td>
                                        <td style="width: 110px">{{car.endTime |date:'yyyy-MM-dd'}}</td>
                                        <td style="width: 110px">{{car.productingStatusDesc}}</td>
                                        <td style="width: 110px">{{car.organizationUnitDesc}}</td>
                                        <td style="width: 110px">{{car.userName}}</td>
                                        <td style="width: 110px">{{car.assemblyStartTime|date:'yyyy-MM-dd'}}</td>
                                        <td style="width: 110px">{{car.assemblyEndTime|date:'yyyy-MM-dd'}}</td>
                                        <td style="width: 110px">{{car.productedStatusDesc}}</td>
                                        <td style="width: 110px">{{car.dispatcherName}}</td>
                                        <td style="width: 110px">{{car.issueTime|date:'yyyy-MM-dd'}}</td>
                                        <td style="width: 110px">{{car.remark}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    (onPageChange)="getDescList($event)"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>


    <!-- 报工任务 -->
    <p-dialog [header]="taskTitle" [style]="{width: '90%', height: '70%',background:'#fff'}" [(visible)]="reportingVisible" modal="modal" [responsive]="true">
        <div *ngIf="taskInfo">
            <div class="ui-g">
                <span class="ui-float-label  quality-dept ui-g-3">
                    <span class="text">任务编号</span>
                    <input id="input" type="text" readonly disabled pInputText [(ngModel)]="taskInfo.jobNumber">
                </span>
                <span class="ui-float-label quality-dept  ui-g-3">
                    <span class="text">规程编号</span>
                    <input id="input" type="text" readonly disabled pInputText [(ngModel)]="taskInfo.techniqueNumber">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">规程名称</span>
                    <input id="input" readonly disabled type="text" pInputText [(ngModel)]="taskInfo.techniqueName">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">工序名称</span>
                    <input id="input" readonly disabled type="text" pInputText [(ngModel)]="taskInfo.productionName">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">工步名称</span>
                    <input id="input" readonly disabled type="text" pInputText [(ngModel)]="taskInfo.workStepName">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">标准工时</span>
                    <input id="input" readonly disabled type="text" pInputText [(ngModel)]="taskInfo.workingHour">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">装配班组</span>
                    <input id="input" readonly disabled type="text" pInputText
                        [(ngModel)]="taskInfo.organizationUnitDesc">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">装配人员</span>
                    <input id="input" readonly disabled type="text" pInputText [(ngModel)]="taskInfo.userName">
                </span>
                <span class="ui-float-label quality-dept ui-g-3">
                    <span class="text">绩效工时</span>
                    <input id="input" readonly disabled type="text" pInputText [(ngModel)]="taskInfo.performanceHour">
                </span>
            </div>
            <button *ngIf="taskTitle != '生产报工查看'" pButton type="button" icon="pi pi-plus" (click)="addEv()" label="添加报工人"></button>
            <p-table [value]="taskInfo.jobWorkers" [(selection)]="selectTablelist" [paginator]="false">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 80px" *ngIf="taskTitle != '生产报工查看'">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th style="width: 80px">序号</th>
                        <th style="width: 110px">装配班组</th>
                        <th style="width: 110px">装配人员</th>
                        <th style="width: 110px">绩效工时</th>
                        <th style="width: 110px">报工时间</th>
                        <th style="width: 210px">报工工时</th>
                        <th style="width: 110px">备注</th>
                        <th style="width: 110px" *ngIf="taskTitle != '生产报工查看'">操作</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car="$implicit">
                    <tr>
                        <td style="width: 80px" *ngIf="taskTitle != '生产报工查看'">
                            <p-tableCheckbox [value]="car"></p-tableCheckbox>
                        </td>
                        <td style="width: 80px">{{rowIndex+1}}</td>
                        <td style="width: 110px">
                            <div>
                                <p-dropdown (onChange)="unitChangeonlyEv($event.value,car)"
                                    [options]="getOrganizationUnitList" dataKey="id" [disabled]="taskTitle == '生产报工查看'"
                                    [(ngModel)]="car.organizationUnitDesc" placeholder="请选择" optionLabel="displayName">
                                </p-dropdown>
                            </div>
                        </td>
                        <td style="width: 110px">
                            <p-dropdown [options]="getOrganizationUnitUsersByIdList" dataKey="id" [disabled]="taskTitle == '生产报工查看'"
                                [(ngModel)]="car.userName" placeholder="请选择" optionLabel="name"></p-dropdown>
                        </td>
                        <td style="width: 110px">{{car.performanceHour}}</td>
                        <td style="width: 110px">{{car.reportTime | date:'yyyy-MM-dd'}}</td>
                        <td style="width: 210px">
                            <p-spinner [(ngModel)]="car.reportHour" [disabled]="taskTitle == '生产报工查看'"></p-spinner>
                        </td>
                        <td style="width: 110px">{{car.remark}}</td>
                        <td style="width: 110px" *ngIf="taskTitle != '生产报工查看'">
                            <a (click)="removeEv(car)" href="javascript:;">删除</a>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
        <p-footer *ngIf="taskTitle != '生产报工查看'">
            <button type="button" class="ui-button-secondary" (click)="reportingVisible = false" pButton
                label="取消"></button>
            <button type="button" pButton (click)="performanceHourEv(0)" label="工时提报"></button>
            <button type="button" class="ui-button-warning" style="color:#fff" pButton (click)="performanceHourEv(2)"
                label="重启工时提报"></button>
            <button type="button" class="ui-button-warning" style="color:#fff" pButton (click)="performanceHourEv(1)"
                label="工时提报结束"></button>
        </p-footer>
    </p-dialog>
    <!-- 履历弹窗 -->
    <p-dialog [style]="{width: '70%', height: '50%',background:'#fff'}" header="操作履历" [(visible)]="llVisible"
        (onHide)="displayclose()" modal="modal" [responsive]="true">
        <p-table [value]="logList" [paginator]="false">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 150px">序号</th>
                    <th style="width: 150px">操作时间</th>
                    <th style="width: 150px">操作类型</th>
                    <th style="width: 150px">操作人</th>
                    <th style="width: 150px">操作详情</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                <tr>
                    <td style="width: 80px">{{rowIndex+1}}</td>
                    <td style="width: 150px">{{car.creationTime | date:'yyyy-MM-dd'}}</td>
                    <td style="width: 150px">{{car.operationTypeDesc}}</td>
                    <td style="width: 150px">{{car.userName}}</td>
                    <td style="width: 150px">{{car.businessTypeDesc}}</td>
                </tr>
            </ng-template>
        </p-table>


    </p-dialog>

    <!-- 撤销报工任务 -->
    <p-dialog [style]="{background:'#fff'}" header="任务撤销" [(visible)]="cancelVisible" (onHide)="displayclose()"
        modal="modal" [responsive]="true">
        <div>
            <div>确认撤销报工任务？</div>
            <textarea rows="5" [(ngModel)]="cancelVal" cols="30" pInputTextarea></textarea>
        </div>
        <p-footer>
            <button pButton type="button" (click)="cancelVisible = false" label="取消"
                class="ui-button-secondary"></button>
            <button pButton type="button" (click)="cancelEv()" label="确定"></button>
        </p-footer>
    </p-dialog>
</div>